import React, { Component } from 'react'
import { View, Button, Text, Picker } from '@tarojs/components'
import { getCurrentInstance } from '@tarojs/taro'
import Banner from '../../containers/Banner'
import { AtInput, AtDivider, AtButton }  from 'taro-ui'
import {getIndex, FamilyRelationList, yesOrNoList, genderList} from '../../utils/constant'
import TaroRegionPicker from '../../components/taro-region-picker'
import {addEducationInfo, addFamilyInfo, updateEducationInfo, updateFamilyInfo} from "../../api/user";


import './index.scss'

class Page extends Component {

  constructor (props) {
    super(props);
    this.state = {
      encodeOid: '',
      OperationType: '',
      familyFloat: true,
      checkObj: {
        name: '家属姓名',
        gender: '家属性别',
        relation: '关系',
        company: '家属工作单位',
        phone: '联系号码',
        isEmergencyContact: '是否紧急联系人'
      },
      form: {
        company: '',
        empoid: '',
        gender: '',
        isEmergencyContact: '',
        name: '',
        oid: '',
        phone: '',
        relation: ''
      }
    }
  }

  componentWillMount () { }

  componentDidMount () {
    let { oid, OperationType, data, encodeOid } = getCurrentInstance().router.params;
    let { form } = this.state;
    form.empoid = oid;
    if (data){
      form = JSON.parse(decodeURIComponent(data));
    }
    this.setState({encodeOid, form, OperationType});
  }

  componentWillUnmount () { }

  handlePickerChange = (e, name, list) => {
    let value = list[e.detail.value].value;
    let { form } = this.state;
    let newData = {...form};
    newData[name] = value;
    this.setState({
      form: newData
    });
    return value
  };

  handleInputChange = (value, name) => {
    const { form } = this.state;
    let newData = {...form};
    newData[name] = value;
    this.setState({
      form: newData
    });
    return value
  };


  handleBack = (value) => {
    let { form, encodeOid } = this.state
    console.log(form)
    Taro.redirectTo({ url: '/pages/portal/index?oid=' + encodeOid })
  }

  handleSubmit = () => {
    const phoneFormat = /^1[3456789]\d{9}$/;
    let { form, OperationType, checkObj, encodeOid } = this.state;
    let { isDelete, operatetime, oid, ...data} =form;
    let arr;
    if (!(phoneFormat.test(data.phone))){
      Taro.showToast({title: `联系号码格式错误`, icon: 'none', duration: 1000});
      return;
    }
    if ((arr = Object.keys(data).filter(v=>!data[v])).length>0) {
      Taro.showToast({
        title: `请填写${checkObj[arr[0]]}`,
        icon: 'none',
        duration: 1500
      });
      return;
    }
    if (OperationType && OperationType ==='add'){
      addFamilyInfo(form).then(res => {
        Taro.redirectTo({url: '/pages/portal/index?oid=' + encodeOid });
      });
    }else if (OperationType && OperationType ==='update'){
      updateFamilyInfo(form).then(res => {
        Taro.redirectTo({url: '/pages/portal/index?oid=' + encodeOid });
      });
    }
  };

  render () {
    return (
      <View className='family'>
        <AtDivider content='请填写家庭成员' fontColor='#50C77A'  />
        <View>
          <View className='family__form'>
            <View className='family__form-label'>家属姓名<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写'
              value={this.state.form.name}
              onChange={(e) => this.handleInputChange(e, 'name')}
            />
          </View>
          <View className='family__form'>
            <View className='family__form-label'>家属性别<View className='required'>*</View></View>
            <Picker className='family__form-picker' mode='selector' range={genderList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'gender', genderList)}>
              {
                this.state.form.gender
                  ? <View className='family__form-picker-value'>{genderList[getIndex(genderList,this.state.form.gender)].label}</View>
                  : <View className='family__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='family__form'>
            <View className='family__form-label'>关系<View className='required'>*</View></View>
            <Picker className='family__form-picker' mode='selector' range={FamilyRelationList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'relation', FamilyRelationList)}>
              {
                this.state.form.relation
                  ? <View className='family__form-picker-value'>{FamilyRelationList[getIndex(FamilyRelationList,this.state.form.relation)].label}</View>
                  : <View className='family__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='family__form'>
            <View className='family__form-label'>家属工作单位<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写家属工作单位'
              value={this.state.form.company}
              onChange={(e) => this.handleInputChange(e, 'company')}
            />
          </View>
          <View className='family__form'>
            <View className='family__form-label'>联系号码<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='phone'
              placeholder='请填写联系号码'
              value={this.state.form.phone}
              onChange={(e) => this.handleInputChange(e, 'phone')}
            />
          </View>
          <View className='family__form'>
            <View className='family__form-label'>是否紧急联系人<View className='required'>*</View></View>
            <Picker className='family__form-picker' mode='selector' range={yesOrNoList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'isEmergencyContact', yesOrNoList)}>
              {
                this.state.form.isEmergencyContact
                  ? <View className='family__form-picker-value'>{yesOrNoList[getIndex(yesOrNoList,this.state.form.isEmergencyContact)].label}</View>
                  : <View className='family__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
        </View>

        <View className='button_group'>
          <AtButton onClick={() => this.handleBack()}>返回</AtButton>
          <AtButton type='primary' onClick={() =>{this.handleSubmit()}}>保存</AtButton>
        </View>
      </View>
    )
  }
}

export default Page
